<div id="carousel" class="container">
    <template>
        <b-carousel>
            <b-carousel-item v-for="carousel in carousels">
                <section :class="`hero is-medium`">
                    <img width="100%" :src="`${carousel.img}`" :alt="carousel.desc">
                </section>
            </b-carousel-item>
        </b-carousel>
    </template>
</div>
<script>
    var carousel = new Vue({
        el: '#carousel',
        delimiters: ['{$', '$}'],
        created() {
            this.getBanners()
        },
        data: {
            carousels: []
        },
        methods: {
            getBanners(){
                fetch("{% url 'goods:rotation' %}").then(res => res.json()).then(data => {
                    this.carousels = data.data
                })
            }
        },
    })
</script>